<template>
  <view>
    <view class="detail">
      <view class="detail-pic">
        <image class="detail-pic__img" mode="aspectFill" :src="formatPic(datalist.pic, 'orj360')"></image>
      </view>
      <view class="detail-info">
        <view class="detail-title">{{ datalist.title }}</view>
      </view>
    </view>
    <PlayList v-if="datalist.id" :vid="datalist.id" />
    <Like v-if="actor" :actor="actor" :not="datalist.id" />
    <Hot v-if="datalist.id" :not="datalist.id" />
  </view>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import PlayList from '@/components/playList/index.vue'
import Like from '@/components/Like/index.vue'
import Hot from '@/components/Hot'
import { formatPic } from '@/utils/index'
export default {
  data() {
    return {
      actor: '',
      datalist: {}
    }
  },
  mounted() {
    this.getData()
  },
  components: {
    PlayList,
    Like,
    Hot
  },
  methods: {
    formatPic,
    ...mapActions('play', ['getDetail']),
    getActor(actor) {
      if (actor) {
        return actor.map(item => item.title).join(',')
      } else {
        return null
      }
    },
    getData() {
      const { id } = this.$mp.query
      this.getDetail({
        id
      }).then(res => {
        this.datalist = res.data
        this.actor = this.getActor(res.data.actor)
        console.log(this.actor, 'actor')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.detail {
  display: flex;
  padding: 20px;
  border-bottom: 1px solid #dedede;

  &-pic {
    width: 240rpx;

    &__img {
      width: 100%;
      height: 320rpx;
    }
  }

  &-info {
    margin-left: 20rpx;
    width: 450rpx;
  }
}
</style>
